<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/plan/caigou/css/cglist.css"/>
    <link rel="stylesheet" type="text/css" href="/plan/caigou/css/product.css"/>
    <script type="text/javascript" src="/plan/caigou/js/jquery.1.9.1.js" ></script>
    <script type="text/javascript" src="/plan/caigou/js/layer.js" ></script>
    <link rel="stylesheet" type="text/css" href="/plan/caigou/css/layer.css"/>
    <script type="text/javascript" src="/plan/caigou/js/rem.js" ></script>
    <script src="/plan/js/dropload.min.js"></script>

    <title>库存查询</title>
</head>
<style>
    *{
        -webkit-overflow-scrolling: touch;
    }


    .dropload-noData,.dropload-load,.dropload-refresh{
        position: relative;
        margin-top: 0.31rem;
        font-size: 0.22rem;
        width: 1.6rem;
        margin: 0 auto;
        color: grey;
        text-align: center;
    }
    .dropload-noData:after,.dropload-load:after,.dropload-refresh:after {
        content: "";
        position: absolute;
        top: 0.16rem;
        width: 1.01rem;
        height: 1px;
        background-color: #eeeeee;
        right: -1.18rem;
    }

    .dropload-noData:before,.dropload-load:before,.dropload-refresh:before {
        content: "";
        position: absolute;
        top: 0.16rem;
        width: 1.01rem;
        height: 1px;
        background-color: #eeeeee;
        left: -1.2rem;
    }
    .dropload-down{
        display: none;
    }

    .top_left{width: 49.5%;}
    .top_right{width: 49.5%;border-right: none;}
</style>
<body style="background:#fff">
<div class="top">
    <div class="top_left">
        <span class="top_left_con1">仓库</span>
        <img class="top_left_xia1" src="/plan/caigou/img/jtxia.png" />
        <img class="top_left_up1" src="/plan/caigou/img/jtup.png" />
    </div>
    <div class="top_right">
        <span class="top_left_con2">全部</span>
        <img class="top_left_xia2" src="/plan/caigou/img/jtxia.png" />
        <img class="top_left_up2" src="/plan/caigou/img/jtup.png" />
    </div>
</div>
<ul class="company">
    {volist name="glist" id="vo"}
    <li dataid="{$vo.id}" {if condition="$key eq 0"}style="color:#457bc7"{/if}>{$vo.gname}<img src="/plan/caigou/img/jtyou.png" /></li>
    {/volist}
</ul>
<ul class="examine">
    <li style="color: #457bc7;" dataid="0">全部<img src="/plan/caigou/img/jtyou.png" /></li>
    <li dataid="2">成品<img src="/plan/caigou/img/jtyou.png" /></li>
    <li dataid="1">半成品<img src="/plan/caigou/img/jtyou.png" /></li>
</ul>
<ul class="productinfo" id="pro1">

</ul>
</body>
<script>//头部下拉
var jsonData={};

var meLoad;
jsonData.counter=1;
jsonData.cid={$glist[0]['id']};
initData();
$(function(){
    var winHeight = $(window).height();
    var topHeight = $('.top').height();
    var topPadding = parseFloat($('.top').css('padding-top'))*2;
    var conHeight = winHeight-topHeight;
    $('.company').css({'height':conHeight+'px','top':topHeight+topPadding+1+'px'});
    $('.examine').css({'height':conHeight+'px','top':topHeight+topPadding+1+'px'});
    $('.top_left').click(function(){
        $('.company').toggle();
        $('.examine').hide();
        $('.top_left_xia1').toggle();
        $('.top_left_up1').toggle();
        $('.top_left_xia2').show();
        $('.top_left_up2').hide();
        $("#pro1").toggle();
        $('.top_left_con1').css('color','#000');
        $('.top_left_con2').css('color','#555');
    });
    $('.company li').click(function(){

        $('.top_left_xia1').show();
        $('.top_left_up1').hide();
        $(this).css('color','#457bc7').siblings().css('color','#000');
        let _this = $(this);
        if (jsonData.cid==_this.attr("dataid")){
            $('.company').hide();
            $("pro1").show();
            return false;
        }
        $('.company').hide();
        jsonData.counter=1;

        jsonData.cid = _this.attr("dataid");
        if (jsonData.cid==1 && jsonData.hasOwnProperty("type")){
            delete jsonData.type;
        }
        overProduct();
        $('.top_left_con1').css('color','#555');
    });
    $('.top_right').click(function(){
        if ( jsonData.cid==1){

            return false;
        }

        $('.examine').toggle();
        $('.company').hide();
        $('.top_left_xia2').toggle();
        $('.top_left_up2').toggle();
        $('.top_left_xia1').show();
        $("#pro1").toggle();
        $('.top_left_up1').hide();
        $('.top_left_con1').css('color','#555');
        $('.top_left_con2').css('color','#000');
    });
    $('.examine li').click(function(){
        $('.top_left_xia2').show();
        $('.top_left_up2').hide();
        $(this).css('color','#457bc7').siblings().css('color','#000');
        $('.examine').hide();

        if ($(this).attr("dataid")==0 && jsonData.hasOwnProperty("type")){
            delete jsonData.type;
        }
        jsonData.counter=1;
        if ($(this).attr("dataid")!=0){
            jsonData.type=$(this).attr("dataid");
        }
        overProduct();
        $('.top_left_con2').css('color','#555');
    });
});
function overProduct() {
    $.ajax({
        type:"post",
        url:"/index/store/stock",
        data:jsonData,
        success:function (data) {
            if (data.list!=null){
                jsonData.counter++;
                let str=getList(data.list);
                if (data.list.length==0){
                    str='<img style="display: block; width: 2.82rem;margin: 37% auto;" src="/plan/caigou/img/wu.png">';
                }
                $("#pro1").html(str);
                $("#pro1").show();
                if (data.list.length!=6){

                    meLoad.lock();
                    // 无数据
                    meLoad.noData();
                }else{
                    meLoad.unlock();
                    meLoad.noData(false);
                    meLoad.resetload();
                }



            }

        }

    })
}
function initData() {
    $('.dropload-down').remove();

    // 每页展示4个
    var num = 6;
    var pageStart = 1,pageEnd = 0;
    // dropload
    meLoad =  $('#pro1').dropload({
        scrollArea : window,
        loadDownFn : function(me){

            $.ajax({
                type:"post",
                url:"/index/store/stock",
                data:jsonData,
                success:function (data) {
                    pageEnd = num * jsonData.counter;
                    pageStart = pageEnd - num;
                    if (data.list!=null){
                        let str=getList(data.list);
                        if (jsonData.counter==1 && data.list.length==0){
                            str='<img style="display: block; width: 2.82rem;margin: 37% auto;" src="/plan/caigou/img/wu.png">';
                            $("#pro1").html(str);
                        } else{
                            jsonData.counter++;
                            $("#pro1").append(str);
                        }

                        if (data.list.length!=4){
                            me.lock();
                            // 无数据
                            me.noData(true);
                        }else{

                            me.resetload();
                        }


                    }else{
                        me.lock();
                        // 无数据
                        me.noData();
                    }

                },
                error: function(xhr, type) {
                    me.lock();
                    // 无数据
                    me.noData();
                    me.resetload();
                }
            })

        }
    });

}

function getList(data) {
    var str='';
    data.forEach(function (e,i) {
        str+='<li>\n' +
            '            <div class="infoleft"><img src="/plan/caigou/img/product.png"></div>\n' +
            '        <div class="inforight">\n' +
            '                <p>'+e.cname+'</p>\n' +
            '                <p class="infop2">'+e.b_n+'</p>\n' +
            '            <div class="infop3">\n' +
            '                库存:<span>'+e.num+'</span>\n' +
            '            </div>\n' +
            '        </div>\n' +
            '    </li>';
    });
    return str;
}
</script>

</html>
